/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  CCell, Table, TableBody, TableRow, Text, BlobInputList, TableHead, InputLine, Input, LineColumn,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {objNestSet, } from "../../../common/tool";
import {useOmnipotentPrefItspe, useOmnipotentPrefTitle,} from "../../hook/useOmnipotentPref";
import {FootMenRow} from "../../contain/rarelyVary";
import {评估结果选} from "../../contain/editorJJ";

/*【注意】耦合性：这里配置的行数的顺序位置 {t:'饱和蒸汽', s:5}分段位置有些特殊性代码 =》 dividor[]配置的序号；
允许动态修改的配置。
* */
export const setConfig水质 =(orc:any)=> [
  ['饱蒸钠', [{t:'饱和蒸汽', s:5},{t: orc?.饱蒸钠?.H??' ', s:5}], '钠离子(µg/kg)', '',['≤5', ]],
  ['饱蒸氢电', [{}], '氢电导率(25℃)(µS/cm)', '',[]],
  ['饱蒸化硅', [{}], '二氧化硅(µg/kg)', '',['≤15',]],
  ['饱蒸铁', [{}], '铁离子(µg/kg)', '',['≤15']],
  ['饱蒸铜', [{}], '铜离子(µg/kg)', '',['≤3', ]],
  ['过蒸钠', [{t:'过热蒸汽', s:5},{t: orc?.过蒸钠?.H??' ', s:5}], '钠离子(µg/kg)', '',['≤5', ]],
  ['过蒸氢电', [{}], '氢电导率(25℃)(µS/cm)', '',[]],
  ['过蒸化硅', [{}], '二氧化硅(µg/kg)', '',['≤15',]],
  ['过蒸铁', [{}], '铁离子(µg/kg)', '',['≤15',]],
  ['过蒸铜', [{}], '铜离子(µg/kg)', '',['≤3', ]],
  ['给水钠', [{t:'锅炉给水', s:11},{t: orc?.给水钠?.H??' ', s:11}], '钠离子(µg/L)', '',[]],
  ['给水氢电', [{}], '氢电导率(25℃)(µS/cm)', '',[]],
  ['给水化硅', [{}], '二氧化硅(µg/L)', '',[ ]],
  ['给水铁', [{}], '铁离子(µg/L)', '',['≤20', ]],
  ['给水铜', [{}], '铜离子(µg/L)', '',['≤5', ]],
  ['给水氧', [{}], '溶解氧(µg/L)', '',['≤10', ]],
  ['给水硬度', [{}], '硬度(µmol/L)', '',[ ]],
  ['给水氨', [{}], '联氨(µg/L)', '',[ ]],
  ['给水pH', [{}], 'pH(25℃)', '',['9.2-9.6', ]],
  ['给水氯', [{}], '氯离子（µg/L）', '',[]],
  ['给水TOC', [{}], 'TOCi（µg/L）', '',[]],
    //（续页2）
  ['炉水氢电', [{t:'锅炉炉水', s:6},{t: orc?.炉水氢电?.H??' ', s:6}], '氢电导率(25℃)(μS/cm)', '',[]],
  ['炉水化硅', [{}], '二氧化硅(µg/L)', '',['≤450' ]],
  ['炉水pH', [{}], 'pH(25℃)', '',['9.0-9.7',]],
  ['炉水氯', [{}], '氯离子(mg/L)', '',['≤1.5',]],
  ['炉水电导', [{}], '电导率(25℃)(μS/cm)', '',['＜20', ]],
  ['炉水磷酸', [{}], '磷酸根(mg/L)', '',['≤3', ]],
  ['凝结钠', [{t:'凝结水', s:8},{t: orc?.凝结钠?.H??' ', s:8}], '钠离子(µg/L)', '',[]],
  ['凝结氢电', [{}], '氢电导率(25℃)(µS/cm)', '',[]],
  ['凝结化硅', [{}], '二氧化硅(µg/L)', '',[]],
  ['凝结铁', [{}], '铁离子(µg/L)', '',[]],
  ['凝结铜', [{}], '铜离子(µg/L)', '',[]],
  ['凝结氧', [{}], '溶解氧(µg/L)', '',['≤40']],
  ['凝结硬度', [{}], '硬度(µmol/L)', '',['≈0']],
  ['凝结氯', [{}], '氯离子(µg/L)', '',[]],
  ['补水化硅', [{t:'锅炉补给水', s:4},{t: orc?.补水化硅?.H??' ', s:4}], '二氧化硅(µg/kg)', '',['≤20',]],
  ['补水TOC', [{}], 'TOCi（µg/L）', '',[]],
  ['补水电进', [{}], '电导率(25℃)(μS/cm)', '',['进口：≤0.20' ]],
       //【祸首】 特殊来源地： 1项目被拆分2小行；
  ['补水电出', [{}], '电导率(25℃)(μS/cm),第二小行', '',['出口：≤0.40' ]],
  ['热补悬浮', [{t:'热网补充水', s:2},{t: orc?.热补悬浮?.H??' ', s:2}], '悬浮物（mg/L）', '',[]],
  ['热补硬度', [{}], '总硬度(µmol/L)', '',[]],
  ['疏水铁', [{t:'疏水', s:3},{t: orc?.疏水铁?.H??' ', s:3}], '铁离子(µg/kg)', '',[]],
  ['疏水硬度', [{}], '硬度(µmol/L)', '',[]],
  ['疏水TOC', [{}], 'TOCi（µg/L）', '',[]],
  ['回水铁', [{t:'生产回水', s:3},{t: orc?.回水铁?.H??' ', s:3}], '铁离子(µg/kg)', '',[]],
  ['回水硬度', [{}], '硬度(µmol/L)', '',[]],
  ['回水TOC', [{}], 'TOCi（µg/L）', '',[]],
];
//源于上面setConfig水质配置隐藏的拆分点！
const dividor=[0,5,10,21,27,35,39,41,44,47];

const 水质结果选=['符合要求','基本符合要求','不符合要求','所检项目符合要求','所检项目基本符合要求','不符合项目为:'];
export const items水质检 =setConfig水质(undefined);
export const itemA水质检: string[] = ['水质结果' ];
items水质检.forEach(([name, title, initIsp], i: number) => {
  itemA水质检.push(name as string);
});
//未定义的就采用缺省取值吧； 存储到rep
const defaultValCb= (par: any)=>{
  items水质检.forEach(([name1 , _,item,unit,defs ], i: number) => {
    const name=name1 as string;
    const [biaoz,]=defs as any;
    if(biaoz ){
      let useob=par?.[name];
            //biaoz标准值：带默认值的； 可能更多字段；
      const mergob={b:biaoz,   ...useob};
      par[name]=mergob;
    }
  });
  return  par;
}
const 检测结果选=['进口：0.0','出口：0.0',];
const 备注选=['现场检测',];
export const WaterQuality =
    React.forwardRef((
        {children, show, alone = true, refWidth, label, }: InternalItemProps, ref
    ) => {
      const {inp, setInp} = useItemInputControl({ref});
      const [getInpFilter] = useMeasureInpFilter(null, itemA水质检, defaultValCb);
      const titNode=useOmnipotentPrefTitle({config:items水质检});
      return (
          <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                               alone={alone} label={label!}>
            <Text variant="h5">{label}：</Text>

            {items水质检.map(([name, cfgs, item, unit,[biaoz,yunxu,tiaoj]]: any, i: number) => {
              const {t:group}=cfgs[0];
              return (<React.Fragment key={i}>
                <LineColumn>
                  {dividor.includes(i) && <InputLine label={`${group}-的采样编号：`}>
                    <Input value={inp?.[name]?.H ?? ''}
                           onChange={e => objNestSet(name, 'H', e.currentTarget.value || undefined, inp, setInp)}/>
                  </InputLine>
                  }
                </LineColumn>
                <div css={{display: 'flex', flexWrap: 'wrap', alignItems: 'center'}}>
                  {titNode[i]}
                  &nbsp;
                  {'—'===item && <div css={{display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
                      -{name}:
                      <Input value={inp?.[name]?.n ?? ''} size={15} style={{display: 'inline-flex', width: 'unset'}}
                             onChange={e => objNestSet(name, 'n', e.currentTarget.value || undefined, inp, setInp)}/>
                   </div>
                  }
                  <div css={{display: 'inline-flex', alignItems: 'center'}}>
                    &nbsp;标准要求
                    <BlobInputList value={inp?.[name]?.b ?? ''}
                                   style={{display: 'inline-flex', width: '11rem'}} rows={1}
                                   onListChange={v => objNestSet(name, 'b', v || undefined, inp, setInp)}/>
                    {unit}
                  </div>
                  <div css={{display: 'inline-flex', alignItems: 'center'}}>
                    &nbsp;检测结果
                    <BlobInputList value={inp?.[name]?.r ?? ''} datalist={检测结果选}
                                   style={{display: 'inline-flex', width: '9rem'}} rows={1}
                                   onListChange={v => objNestSet(name, 'r', v || undefined, inp, setInp)}/>
                    {unit}
                  </div>
                  <div css={{display: 'inline-flex', alignItems: 'center'}}>
                    &nbsp;是否符合要求
                    <BlobInputList value={inp?.[name]?.f ?? ''} datalist={评估结果选}
                                   style={{display: 'inline-flex', width: '9rem'}} rows={1}
                                   onListChange={v => objNestSet(name, 'f', v || undefined, inp, setInp)}/>
                  </div>
                  <div css={{display: 'inline-flex', alignItems: 'center'}}>
                    &nbsp;备注
                    <BlobInputList value={inp?.[name]?.m ?? ''} datalist={备注选}
                                   style={{display: 'inline-flex', width: '15rem'}} rows={1}
                                   onListChange={v => objNestSet(name, 'm', v || undefined, inp, setInp)}/>
                  </div>
                </div>
                {dividor.includes(i+1) && <hr/>}
              </React.Fragment>);
            })}
            {children}
          </InspectRecordLayout>
      );
});

//需要特殊处理 "锅炉补给水>>电导率(25℃)(μS/cm)" 这个合并子项目的：
const itemRender=(orc: any, name:string,i:number,item:any,xmcspan:number,unit:any)=><>
  { 37===i? <CCell colSpan={xmcspan} rowSpan={2}>{item}</CCell> :
      38===i? null :
          <CCell colSpan={xmcspan}>{item}</CCell>
  }
  <CCell>{orc?.[name]?.b??'／'}</CCell>
  <CCell>{orc?.[name]?.r??'／'}</CCell>
  <CCell>{orc?.[name]?.f??'／'}</CCell>
  <CCell>{orc?.[name]?.m??''}</CCell>
</>;

export const WaterQualityVw = ({orc, rep}: { orc: any, rep: any }
) => {
  const configNew =React.useMemo(()=>setConfig水质(orc),[orc]);
  const [render]=useOmnipotentPrefItspe({orc, config:configNew,
            itemRender, pcols:2, noNo:true, unitCel:false});
  return <>
    <div css={{"@media print": {paddingBottom: '6rem', pageBreakInside: 'avoid'}} }>
      <Text variant="h2" css={{textAlign: 'center', "@media print": {pageBreakBefore: 'always',},
      }}>电站锅炉水汽质量检验报告（续页）</Text>
      <Text css={{display: 'flex', flexDirection: 'row-reverse', marginRight: '2rem'
      }}>报告编号：{rep.isp?.no}</Text>
    </div>
    <Table id={'WaterQuality'} fixed={ ["8%","11%","18.3%","14%","15%","14%","%"] }
             css={{borderCollapse: 'collapse', "@media print": {marginTop: '-6rem'}}} tight  miniw={800}>
      <TableHead>
        <TableRow>
          <CCell><Text css={{fontSize: '0.75rem'}}>水样名称</Text></CCell><CCell><Text css={{fontSize: '0.75rem'}}>水样编号</Text></CCell>
          <CCell>项 目</CCell><CCell>标准要求</CCell>
          <CCell>检测结果</CCell><CCell>是否符合要求</CCell><CCell>备注</CCell>
        </TableRow>
      </TableHead>
      <TableBody>
        <RepLink rep={rep} tag={"WaterQuality"}>
          {render}
        </RepLink>
      </TableBody>
      <FootMenRow span={7} orc={orc} rep={rep}/>
    </Table>
  </>;
};
